<template>
  <div class="wait-review-container">
    <el-table
      :data="waitReviewArticles"
      stripe
      :default-sort="{ prop: 'date', order: 'ascending' }"
      style="width: 100%"
      max-height="700"
      size="mini"
      :header-row-style="{
        // 设置表头行样式
        height: '60px',
      }"
      :header-cell-style="{
        // 设置表头样式
        'background-color': '#f5f7fa',
        color: '#333',
        'font-weight': 'bold',
        'text-align': 'center',
        'font-size': '16px',
      }"
      :cell-style="{
        // 设置表格内容样式
        'text-align': 'center',
        'font-size': '14px',
      }"
      :border="true"
    >
      <el-table-column
        fixed
        prop="date"
        label="更新时间"
        sortable
        width="160"
      ></el-table-column>
      <el-table-column prop="title" label="文章标题">
        <template slot-scope="scope">
          <!-- 已发布的直接链接,查看详细信息 -->
          <el-link
            v-if="scope.row.state === '2'"
            type="primary"
            @click="goBlogDetail(scope.row.knowledgeId)"
            style="font-size: 15px"
            >{{ scope.row.title }}</el-link
          >
          <span v-else>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.state === '0'"
            effect="dark"
            type="info"
            size="small"
          >
            草稿箱
          </el-tag>
          <el-tag
            v-if="scope.row.state === '1'"
            effect="dark"
            type="warning"
            size="small"
          >
            待审核
          </el-tag>
          <el-tag
            v-if="scope.row.state === '2'"
            effect="dark"
            type="success"
            size="small"
          >
            已发布
          </el-tag>
          <el-tag
            v-if="scope.row.state === '3'"
            effect="dark"
            type="danger"
            size="small"
          >
            被驳回
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            plain
            @click="handleEditBlog(scope.row.knowledgeId)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            plain
            @click="handleDeleteArticle(scope.row.knowledgeId, scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="center" style="margin: 10px">
      <el-col :span="24">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalArticle"
          :page-size="pageSize"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :prev-text="`上一页`"
          :next-text="`下一页`"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { deleteKnowledge, getDifferentStateKnowledge } from "@/apis/apis";
@Component({
  name: "waitReview",
})
export default class waitReview extends Vue {
  scope: any;
  // 草稿箱的文章的管理
  waitReviewArticles: [
    {
      knowledgeId: number;
      date: string;
      title: string;
      state: string;
    }
  ] = [] as any;
  // 草稿箱中显示的信息
  totalArticle: number = 0;
  pageSize: number = 10;
  pageIndex: number = 1;

  mounted() {
    this.getUserDifferentStateKnowledge(1, this.pageSize, this.pageIndex);
  }
  // 1.获取不同状态下的文章的数据信息,这里获取全部
  getUserDifferentStateKnowledge(
    state: number,
    pageSize: number,
    pageNum: number = 1
  ) {
    getDifferentStateKnowledge(state, pageSize, pageNum)
      .then((res) => {
        if (res.data.code === "200") {
          this.totalArticle = res.data.data.total;
          let resData = res.data.data.records;
          // 每次请求的时候需要清空内容
          this.waitReviewArticles = [] as any;
          resData.forEach((item: any) => {
            this.waitReviewArticles.push({
              knowledgeId: item.knowledgeId,
              date: item.createTime,
              title: item.title,
              state: item.status,
            });
          });
        } else {
          this.$message.error("获取待审核文章列表失败");
          console.log("获取待审核文章列表失败");
        }
      })
      .catch((error) => {
        this.$message.error("获取待审核文章列表失败");
        console.log(error);
      });
  }

  // 2.查看文章的详细信息
  goBlogDetail(knowledgeId: number) {
    let id = knowledgeId.toString();
    const route = this.$router.resolve({
      name: "blogDetail",
      query: {
        knowledgeId: id,
      },
    });
    window.open(route.href, "_blank");
  }

  // 3.编辑文章打开写文章的页面
  handleEditBlog(knowledgeId: number) {
    // 创建路由对象
    // 需要将number类型的knowledgeId转换为string类型
    let id = knowledgeId.toString();
    const route = this.$router.resolve({
      path: "/writeBlog",
      query: {
        knowledgeId: id,
      },
    });
    // 打开新页面
    window.open(route.href, "_blank");
  }
  // 4. 删除当前的文章
  handleDeleteArticle(knowledgeId: number, index: number) {
    this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        deleteKnowledge(knowledgeId)
          .then((res) => {
            if (res.data.code === "200") {
              this.waitReviewArticles.splice(index, 1);
              this.$message.success("删除文章成功");
            } else {
              this.$message.error("删除文章失败");
            }
          })
          .catch((error) => {
            this.$message.error("删除文章失败");
            console.log("删除文章失败", error);
          });
      })
      .catch(() => {
        this.$message.info("已取消删除");
      });
  }

  handleSizeChange(val: number): void {
    this.pageSize = val;
    this.getUserDifferentStateKnowledge(1, val, this.pageIndex);
  }
  // 处理当前页面的切换
  handleCurrentChange(val: number): void {
    this.pageIndex = val;
    this.getUserDifferentStateKnowledge(1, this.pageSize, val);
  }
}
</script>
  
  <style>
</style>